<template>
  <dashboard-chart :title="title" :loading="loading" :empty="empty" :option="option"></dashboard-chart>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import dashboardChart from '../lib/dashboard-chart.vue';
import { COLOR, LEGEND, XAXIS, GRID, TOOLTIP, SERIES_PIE } from '../lib/echart-default';

export default defineComponent({
  name: 'Chart1',
  components: { dashboardChart },
  setup(props, ctx) {
    const title = ref('现有证书类别数量');
    const loading = ref(false);
    const empty = ref(false);
    const option = reactive({
      color: COLOR,
      toolbox: {
        show: true,
        feature: {
          saveAsImage: { show: true },
        },
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        ...LEGEND,
      },
      grid: GRID,
      series: {
        ...SERIES_PIE,
        data: [
          { value: 140, name: '传统物品公证' },
          { value: 138, name: '事项公证' },
          { value: 102, name: '电子产品公证' },
        ],
      },
    });
    return {
      title,
      loading,
      empty,
      option,
    };
  },
});
</script>
